<template>
  <div class="con">
    <div class="contbox6_10">
      <div class="titlelist6_10">活动管理 / {{ name }}</div>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form
            label-width="80px"
            :model="searchFrom"
            class="demo-form-inline"
          >
            <el-form-item label="归属OEM">
              <el-input
                v-model="searchFrom.oemName"
                placeholder="请输入机构ID"
              ></el-input>
            </el-form-item>
            <el-form-item label="归属机构">
              <el-input
                v-model="mechanism"
                @focus="selectInstitution"
                placeholder="请输入归属机构"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构名称">
              <el-input
                v-model="searchFrom.officeName"
                placeholder="请输入机构名称"
              ></el-input
            ></el-form-item>
            <el-form-item label="机构电话">
              <el-input
                v-model="searchFrom.officePhone"
                placeholder="请输入机构电话"
              ></el-input
            ></el-form-item>
            <div class="">
              <el-form-item label="奖励时间">
                <!-- <span class="demonstration">默认</span> -->
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  class="selectTime"
                  style="width: 300px"
                  v-model="searchFrom.timer"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker
              ></el-form-item>
            </div>
          </el-form>
        </div>
        <div class="buttons">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
           <el-button class="butt" style="margin-left:40px" type="primary" @click="handExport">批量导出</el-button>
          <el-button class="butt" @click="back" type="primary">返回</el-button>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" min-width="55"></el-table-column>
          <el-table-column
            prop="oemName"
            label="归属OEM"
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="parentName"
            label="归属机构"
            min-width="120"
          ></el-table-column>
          <el-table-column prop="officeName" label="机构名称" min-width="120">
          </el-table-column>
          <el-table-column
            prop="officePhone"
            label="机构电话"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="allRewardAmt"
            label="全部奖励金额"
            min-width="80"
          ></el-table-column>
          <el-table-column
            prop="settledRewardAmt"
            label="已奖励金额"
            min-width="80"
          ></el-table-column>
        </el-table>
        <div class="btn" style="margin-top: 20px">
          <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> -->
          <!-- <el-button @click="toggleSelection()">取消选择</el-button> -->
          <!-- <el-button style="float:left" @click="quan">全选</el-button> -->

         
          <el-pagination
            background
            style="text-align: right;"
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchFrom.page"
            :page-size="searchFrom.number"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <Tree :showType="showType" @func="transmit" />
  </div>
</template>

<script>
import axios from "axios";
import Tree from "../tree/index";
import { date } from "../../assets/js/commion";
export default {
  data() {
    return {
      SelectData: [],
      mechanism: null,
      showType: false,
      tingStatus: "",
      total: "",
      page: 1,
      number: 10,
      name: this.$route.query.name,
      //全选
      checkedAll: true,
      //搜素需要提交的
      searchFrom: {
        idList: [],
        officeUid: "",
        oemUid: localStorage.getItem("uid"),
        activeUid: this.$route.query.activeUid,
        officeName: "",
        oType: 0, //机构类型
        number: 20, //没页几条
        page: 1, //第几页
        codes: "", //机构ID
        name: "", //机构名称
        phone: "", //手机号码
        startDate: "", //活动开始时间
        endDate: "",
        activeName: "", //活动名称
        status: "", //状态
        timer: "" //时间
      },
      totalNum: 20,
      status: [
        {
          value: "",
          label: "全部"
        },
        {
          value: 0,
          label: "正常"
        },
        {
          value: 1,
          label: "停用"
        }
      ],
      checkedAll: false,
      //时间日期
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      // 列表全选与否
      allSelect: false,
      //表格里面的数据
      tableData: null,
      multipleSelection: [],
      oemUid: null
    };
  },
  components: {
    Tree
  },
  created() {
    // alert(date.isDuringDate("2018-03-05","2019-03-03"))
    this.oemUid = localStorage.getItem("uid");
    this.getList();
  },
  methods: {
    transmit(data) {
      console.log(data.uid);
      //归属机构的uid
      // this.form.officeUid = data.uid;
      // console.log(this.form.officeUid)
      //归属机构名字
      this.mechanism = data.name;
      this.searchFrom.parentUid = data.uid;
      // alert(this.searchFrom.officeUid)
    },
    //设置取消的
    determine() {
      // alert("执行")
      this.showType = false;
    },
    selectInstitution() {
      this.showType = true;
    },
    // 返回
    back() {
      this.$router.push("activityStatistics");
    },
    //批量导出
    handExport() {
      if (this.SelectData.length > 0) {
        for (let i = 0; i < this.SelectData.length; i++) {
          //  let pl = { snUid: +this.SelectData[i].id };
          this.searchFrom.idList.push(this.SelectData[i].officeUid);
        }
      } else {
        this.searchFrom.idList = [];
      }
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/active/officeCountByActive/excel/export",
          responseType: "blob",
          data: _this.searchFrom
        })
        .then(function(d) {
          let blob = new Blob([d.data], { type: "application/vnd.ms-excel" });
          /*let objectUrl = URL.createObjectURL(blob);
                        window.location.href = objectUrl;*/

          var date = new Date();

          var year = date.getFullYear();

          var month = date.getMonth() + 1;
          var day = date.getDate();
          var hour = date.getHours();
          var minute = date.getMinutes();
          var second = date.getSeconds();
          date =
            year +
            "" +
            month +
            "" +
            day +
            "" +
            hour +
            "" +
            minute +
            "" +
            second; //'+date+'

          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = _this.name + date + ".xls"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
      // if (this.multipleSelection.length) {
      //   // this.downloadLoading = true
      //   import('@/vendor/Export2Excel').then(excel => {
      //     const tHeader = ['活动名称','活动id','品牌名','创建时间','开始时间','结束时间','机构名称','机构id','手机号','奖励发放时间']
      //     // const data=this.tableData
      //     const filterVal = ['activeName','activeUid','channelName','createDate','startDate','endDate','officeName','officeUid','phone','rewardDate']
      //     const list = this.multipleSelection
      //     const data = this.formatJson(filterVal, list)
      //     excel.export_json_to_excel({
      //       header: tHeader,
      //       data,
      //       filename: "排行列表",
      //       autoWidth:true,
      //       bookType:"xls"
      //     })
      //     // this.$refs.multipleTable.clearSelection()
      //     // this.downloadLoading = false
      //   })
      // } else {
      //   this.$message({
      //     message: 'Please select at least one item',
      //     type: 'warning'
      //   })
      // }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },

    //获取列表
    getList() {
      this.searchFrom.rewardStartDate = this.searchFrom.timer[0];
      this.searchFrom.rewardEndDate = this.searchFrom.timer[1];
      axios
        .post("/api/active/officeCountByActive", this.searchFrom)
        .then(res => {
          console.log("請求成功");
          console.log(res);
          if (res.data.code == "0000") {
            this.tableData = res.data.data;
            //總頁數
            this.total = res.data.total;
            this.tingStatus = res.data.data;
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
          this.tableData = res.data.data;
          //總頁數
          this.total = res.data.total;
          this.tingStatus = res.data.data;
          console.log(this.tingStatus);
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleCurrentChange(val) {
      this.searchFrom.page = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.searchFrom.page = val;
      this.getList();
    },
    handleClick(val) {
      console.log(val);
      let userId = val.activeUid;
      this.$router.push({
        path: "createActive",
        query: {
          uid: userId,
          isshow: true
        }
      });
    },
    isDuringDate(beginDateStr) {
      var curDate = new Date(),
        beginDate = new Date(beginDateStr.startDate),
        endDate = new Date(beginDateStr.endDate);
      if (curDate >= beginDate && curDate <= endDate) {
        return "进行中";
      } else if (curDate < beginDate) {
        return "未开始";
      } else if (curDate > endDate) {
        return "已结束";
      }
    },
    handleSelectionChange(val) {
      this.SelectData = val;
      //  console.log(this.multipleSelection)
    },
    // 全选
    quan() {
      // console.log(this.tableData.length!=this.multipleSelection.length)
      if (this.tableData.length != this.multipleSelection.length) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
      // console.log(this.multipleSelection)
    },
    //上一页
    prev(val) {
      console.log(val);
      // this.searchFrom.
    },
    //下一页
    next(val) {
      console.log(val);
    },
    qiehuan(val) {
      console.log(val);
    },
    // 重置
    reset() {
      this.searchFrom.parentUid = "";
      this.searchFrom.officeName = "";
      this.mechanism = "";
      this.searchFrom.number =20; //没页几条
      this.searchFrom.page = 1; //第几页
      this.searchFrom.oemName = ""; //机构ID
      this.searchFrom.name = ""; //机构名称
      this.searchFrom.officePhone = ""; //手机号码
      this.searchFrom.rewardStartDate = ""; //活动开始时间
      this.searchFrom.rewardEndDate = "";
      this.searchFrom.activeName = ""; //活动名称
      this.searchFrom.status = ""; //状态
      this.searchFrom.timer = ""; //时间
      this.getList()
    },
    details(val) {
      // console.log(val)
      let userId = val.activeUid;
      // console.log(val.officeUid)
      // return
      this.$router.push({
        path: "createActive",
        query: {
          isSshow: true,
          shows: false,
          uid: userId,
          user: 1
        }
      });
    },
    search() {
      console.log(this.searchFrom.status);
      console.log(this.searchFrom.timer);
      this.searchFrom.page = 1;
      this.getList();
      // axios
      //   .post("/api/active/queryRankActiveList", this.searchFrom)
      //   .then((res) => {
      //     console.log(res);
      //   })
      //   .catch((err) => {
      //     console.log("失败");
      //   });
    },
    ting(num) {
      console.log(num);
      let uid = num.activeUid;
      let status = num.status;
      if (status == 1) {
        status = 0;
      } else {
        status = 1;
      }
      axios
        .post("/api/active/changeActiveStatus", { uid: uid, status: status })
        .then(res => {
          console.log(res);
          axios
            .post("/api/active/queryRankActiveList", { number: 10, page: 1 })
            .then(res => {
              console.log("請求成功");
              console.log(res);
              this.tableData = res.data.data;
              //總頁數
              this.total = res.data.total;
              this.tingStatus = res.data.data;
              console.log(this.tingStatus);
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped>
.con {
  position: relative;
}
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
/deep/ .selectTime .el-range-separator {
  width: 80px;
}
.maiTitle {
  height: 50px;
  font-size: 16px;
  margin-top: 40px;
  color: #2f2c29;
}
.btn {
  align-items: center;
}
.exports {
  color: #409eff;
  margin-left: 20px;
  margin-top: 10px;
  float: left;
}
.info {
  display: flex;
  justify-content: center;
  align-items: center;
}
.subTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
  /* height: 50px; */
}
.statusColor {
  color: #67c23a;
}
.btnGroup {
  margin-bottom: 20px;
}
.activeTitle {
  font-size: 18px;
  color: #2f2c29;
  border-bottom: 2px solid black;
  height: 50px;
  line-height: 50px;
  margin-bottom: 50px;
}
@media screen and (max-width: 1600px) {
  .lister {
    width: 50% !important;
  }
}
@media screen and (max-width: 1010px) {
  .lister {
    width: 100% !important;
  }
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
</style>
